import { defineComponent, reactive, provide, onMounted } from "vue";
import { getAnimes, getDefaultAnimes } from "@/api/animes.ts";
import VirtualList from "@/components/VirtualList/index";
import AnimeItem from "@/components/AnmineItem";
import Loading from "@/components/Loading";
import Statistic from "./Statistic";
import "./style.scss";

export default defineComponent({
  name: "anmies",

  setup() {
    const state = reactive({
      defaultWeight: {
        score_index: 8,
        coins_index: 3,
        danmakus_index: 2,
        favorites_index: 6,
        likes_index: 2,
        reply_index: 1.5,
        share_index: 2.5,
        views_index: 1,
        avg_coins_index: 6,
        avg_danmakus_index: 4,
        avg_favorites_index: 0,
        avg_likes_index: 5,
        avg_reply_index: 4.5,
        avg_share_index: 7,
        avg_views_index: 3
      },
      weight: {
        score_index: 8,
        coins_index: 3,
        danmakus_index: 2,
        favorites_index: 6,
        likes_index: 2,
        reply_index: 1.5,
        share_index: 2.5,
        views_index: 1,
        avg_coins_index: 6,
        avg_danmakus_index: 4,
        avg_favorites_index: 0,
        avg_likes_index: 5,
        avg_reply_index: 4.5,
        avg_share_index: 7,
        avg_views_index: 3
      },
      isDefault: true,
      visible: false,
      showStatistic: false,
      loading: false,
      rows: [],
      animes: [],
      params: {
        page: 0,
        pageSize: 10,
        key: ""
      }
    });

    const getAnimesData = async () => {
      if (state.params.key) {
        state.params.page = 1;
      } else {
        state.params.page = state.params.page + 1;
      }
      state.loading = true;
      let res;
      let isDefault = true;
      Object.keys(state.weight).forEach(key => {
        if (isDefault && state.weight[key] !== state.defaultWeight[key]) {
          isDefault = false;
        }
      });
      state.isDefault = isDefault;
      provide("isDefault", state.isDefault);
      provide("weight", state.weight);
      if (isDefault) {
        res = await getDefaultAnimes(state.params);
      } else {
        res = await getAnimes({
          ...state.params,
          weight: state.weight
        });
      }
      const list = res.rows ? res.rows : res;
      if (state.params.key) {
        state.animes = list;
      } else {
        if (state.params.page == 1) {
          state.animes = list;
        } else {
          state.animes = state.animes.concat(list);
        }
      }

      state.visible = false;
      state.loading = false;
      return res;
    };

    const handleSearch = () => {
      state.params.page = 0;
      getAnimesData();
    };

    const slots = {
      default: (props: any) => {
        return <AnimeItem data={props.item} />;
      },
      bottom: () => <Loading v-show={state.loading} color="red" />
    };

    onMounted(() => {
      getAnimesData();
    });

    return () => {
      const weightInfos = [
        { title: "总量权重", key: "" },
        { title: "B站评分：", key: "score_index" },
        { title: "追番总量：", key: "favorites_index" },
        { title: "播放总量：", key: "views_index" },
        { title: "硬币总量：", key: "coins_index" },
        { title: "弹幕总量：", key: "danmakus_index" },
        { title: "点赞总量：", key: "likes_index" },
        { title: "评论总量：", key: "reply_index" },
        { title: "分享总量：", key: "share_index" },
        { title: "单集权重", key: "" },
        { title: "单集播放量：", key: "avg_views_index" },
        { title: "单集硬币量：", key: "avg_coins_index" },
        { title: "单集弹幕量：", key: "avg_danmakus_index" },
        { title: "单集点赞量：", key: "avg_likes_index" },
        { title: "单集评论量：", key: "avg_reply_index" },
        { title: "单集分享量：", key: "avg_share_index" }
      ];
      return (
        <div class="full anime-con">
          <a-layout>
            <a-layout-header style="background: #fff; text-align:center">
              <a-input
                value={state.params.key}
                size="large"
                allow-clear
                style="width: 30%"
                placeholder="请输入关键字.."
                onPressEnter={handleSearch}
                onChange={(event: any) => {
                  state.params.key = event.currentTarget.value;
                }}
              />
              <a-button
                type="primary"
                size="large"
                style="margin-left: 1rem"
                loading={state.loading}
                onClick={handleSearch}
              >
                查询
              </a-button>
              <a-button
                size="large"
                style="margin-left: 1rem"
                onClick={() => {
                  state.visible = true;
                }}
              >
                调整权重
              </a-button>
              <a-button
                size="large"
                style="margin-left: 1rem"
                onClick={() => {
                  state.showStatistic = true;
                }}
              >
                查看统计
              </a-button>
            </a-layout-header>
            <a-layout-content>
              <div class="animes" style="position:relative">
                <VirtualList
                  type="variable"
                  size={340}
                  remain={3}
                  data={state.animes}
                  interval={100}
                  distance={200}
                  onLoadMore={getAnimesData}
                  v-slots={slots}
                ></VirtualList>
              </div>
            </a-layout-content>
          </a-layout>
          {state.showStatistic ? (
            <Statistic
              onHideStatistic={() => {
                state.showStatistic = false;
              }}
            />
          ) : (
            ""
          )}

          <a-drawer
            visible={state.visible}
            title="权重调整"
            placement="right"
            width="25%"
            onClose={() => {
              state.visible = false;
            }}
          >
            <div class="weight-con">
              {weightInfos.map(item => {
                if (item.key == "") {
                  return (
                    <a-row style="line-height: 3rem; height: 3rem; font-size: 1.3rem">
                      {item.title}
                    </a-row>
                  );
                } else {
                  return (
                    <a-row style="line-height: 2rem; padding-bottom: 0.5rem">
                      <a-col
                        span={6}
                        style="text-align: right; font-size: 1rem"
                      >
                        {item.title}
                      </a-col>
                      <a-col span={14} style="padding-right: 1rem">
                        <a-slider
                          value={state.weight[item.key]}
                          min={0}
                          max={10}
                          step={0.1}
                          onChange={(value: number) => {
                            state.weight[item.key] = value;
                          }}
                        />
                      </a-col>
                      <a-col span={4} style="text-align: center">
                        <a-input-number
                          value={state.weight[item.key]}
                          min={0}
                          max={10}
                          step={0.5}
                          style="marginleft: 16px"
                          onChange={(value: number) => {
                            state.weight[item.key] = value;
                          }}
                        />
                      </a-col>
                    </a-row>
                  );
                }
              })}

              <a-row style="justify-content: center; margin-top: 1rem">
                <a-space size={10}>
                  <a-button
                    onClick={() => {
                      state.visible = false;
                    }}
                  >
                    取消
                  </a-button>
                  <a-button type="primary" onClick={getAnimesData}>
                    确定
                  </a-button>
                </a-space>
              </a-row>
            </div>
          </a-drawer>
        </div>
      );
    };
  }
});
